
import React, { useState, useEffect,useRef } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Breadcrumb, Space, Button, Popconfirm, message, Checkbox, Modal, Form, Divider, Input } from 'antd';
import ShopTable from '../../components/ShopTable'
import ShopSearch from '../../components/Shopsearch'
import menuRoute from '../../routes/menuroute'
import UploadImg from '../../components/Upload'

const CheckboxGroup = Checkbox.Group;
let defaultCheckedList = [];


const UserAuth = (props) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [detailInfo, setDetail] = useState({})
    const [aa, setAA] = useState(null)
    const [checkedList, setCheckedList] = useState(defaultCheckedList);
    const [indeterminate, setIndeterminate] = React.useState(true);
    const [checkAll, setCheckAll] = useState(false);
    const [shopimg, setImg] = useState(null)
    const addFormRef=useRef()
    const { opreaterList } = props
    const plainOptions = [];
    menuRoute.forEach(item => {
        if (item.roles) {
            plainOptions.push(item.name)
        }
    })

    const SearchForm = {  //搜索组件传值
        search: {
            title: '名称搜索：',
            placeholder: '请输入名称'
        }
    }
    useEffect(() => {
        props.dispatch({
            type: 'get_opreaters'
        })
    }, [])

    const handleAddClassify = () => {  //添加商品分类
        setAA(true)
        setDetail({})
        setIsModalVisible(true);
    }

    const handleEdmit = (record) => {//编辑显示弹框
        console.log(record)
        // defaultCheckedList = record.auth.split(',')
        record.auth.split(',').forEach(item => {
            defaultCheckedList.push(changeItem(item))
        })
        // console.log(defaultCheckedList, 'defaultCheckedList')
        setCheckedList(defaultCheckedList)
        setDetail({ ...record, diatype: '编辑' })
        setIsModalVisible(true);
    }
    const handleCancel = () => {//关闭弹框
        setIsModalVisible(false);
        defaultCheckedList.length = 0
        // console.log(defaultCheckedList, 'defaultCheckedList')
        setAA(false)
    };
    const handleConfirm = () => {//弹框确定

        setAA(false)
        if (aa) {  //新增
            console.log('1111')

        } else {//编辑
            // console.log('2222')
            // console.log(checkedList,detailInfo,'checkedList')
            const newlist = [];
            checkedList.forEach(item => {
                menuRoute.forEach(v => {
                    if (v.name === item) {
                        newlist.push(v.roles)
                    }
                })
            })
            props.dispatch({
                type: 'edmit_auth',
                payload: {
                    auth: newlist.join(','),
                    id: detailInfo.id
                }
            })
        }
        /* props.dispatch({
            type: 'get_opreaters',
            
        }) */
        setIsModalVisible(false);
        defaultCheckedList.length = 0;
        setCheckedList(defaultCheckedList)
    }
    const handleSearch = (val) => {//搜索
        // console.log(val,'keyword')
        props.dispatch({
            type: 'get_opreaters',
            payload: {
                keyword: val,
            }
        })
    }
    const delConfirm = (record) => {//删除确定
        const { id } = record;
        props.dispatch({
            type: 'delete_opreate',
            payload: id
        })
        props.dispatch({
            type: 'get_opreaters'
        })
    }

    const delCancel = (e) => {//删除取消
        message.error('删除取消');
    }
    const handleDisabled = (record) => {//修改商品上架状态
        console.log(record)
        // const { id, isDisabled } = record
    }
    const onChange = list => { //复选框值改变
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < plainOptions.length);
        setCheckAll(list.length === plainOptions.length);
        // console.log(list, 'list')
    };

    const onCheckAllChange = e => {//复选框全选
        setCheckedList(e.target.checked ? plainOptions : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
    };

    const changeItem = (item) => {  //权限数字--汉字转换
        let res;
        menuRoute.forEach(v => {
            if (v.roles === item) {
                res = v.name
            }
        })
        return res

    }
    const handleUrl = (val) => {//获取图片路径
        console.log(val.response && val.response.imgUrl)
        setImg(val.response && val.response.imgUrl)
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
        },
        {
            title: '用户名称',
            dataIndex: 'username',
            key: 'username',
            align: 'center',
        },
        {
            title: '用户身份',
            dataIndex: 'identity',
            key: 'identity',
            align: 'center',
        },
        {
            title: '用户权限',
            dataIndex: 'auth',
            width: 350,
            key: 'auth',
            align: 'center',
            render: (auth) => {
                return auth.split(',').map((item, ind) => {
                    return <span key={ind} style={{ padding: '2px 5px', backgroundColor: '#f1f1f1', margin: '4px', display: 'inline-block', textOverflow: 'nowrap' }}>
                        {changeItem(item)}
                    </span>

                })
            },
        },
        {
            title: '操作',
            key: 'opreat',
            align: 'center',
            width: 180,
            render: (text, record) => (
                <Space size="middle">
                    <Button type="link" size='small' onClick={() => handleEdmit(text, record)}>编辑</Button>
                   {/*  <Popconfirm
                        title="确定要删除这项吗?"
                        onConfirm={() => delConfirm(text, record)}
                        onCancel={delCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="link" size='small'
                        >删除</Button>
                    </Popconfirm> */}

                </Space>
            ),
        }
    ];

    // console.log(opreaterList)
    return (
        <div className={style.authManage}>
            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i>
                        <a href="/layout">主页</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        权限
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        权限管理
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.main}>
                <section>
                    {/* 搜索 */}
                    <ShopSearch
                        SearchForm={SearchForm}
                        handleSearch={handleSearch}
                    />
                    {/* 添加 */}
                    {/* <Button type="primary" onClick={handleAddClassify} size='small' style={{ marginBottom: '15px' }}>新增</Button> */}

                    <ShopTable curList={opreaterList} columns={columns} />
                </section>
            </div>
            <Modal title={aa ? '新增' : "编辑权限"}
                visible={isModalVisible}
                onOk={handleConfirm}
                onCancel={handleCancel}
                okText='确认'
                cancelText='取消'
            >

                {
                    aa ?
                        <Form
                            name="basic"
                            ref={addFormRef}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="用户名称"
                                name="username"
                                rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="用户密码"
                                name="password"
                                rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="用户身份"
                                name="identity"
                                rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="用户头像"
                            >
                                <UploadImg content={handleUrl} />
                            </Form.Item>
                            <Form.Item
                                name="auth"
                                label="用户权限"
                            >
                                <Checkbox style={{height:'0px'}}
                                indeterminate={indeterminate} 
                                onChange={onCheckAllChange} 
                                checked={checkAll}>
                                    全选
                                </Checkbox>
                                <Divider />
                                <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
                            </Form.Item>
                        </Form>
                        : <div>
                            <Checkbox
                                indeterminate={indeterminate}
                                onChange={onCheckAllChange}
                                checked={checkAll}>
                                全选
                                </Checkbox>
                            <Divider />
                            <CheckboxGroup
                                options={plainOptions}
                                value={checkedList} onChange={onChange} />
                        </div>
                }

            </Modal>

            {/*  {aa&& <DialogForm 
            detailInfo={detailInfo} 
            isModalVisible={isModalVisible} 
            cancel={getCancel}
            confirm={getConfirm}
            />} */}
        </div>
    );
}

export default connect((state) => {
    return {
        opreaterList: state.opreaterList,
    }
})(UserAuth);

